<template>
  <div @dblclick="clear" class="debugPanel">
    <ul>
      <li class="itemStyle" v-for="el in list">
        <dl style="display:flex;margin-bottom:10px;margin-top:10px">
          <dt
            class="debugtype"
            :style="{ color: el.mtype == 'send' ? 'red' : 'green' }"
          >
            {{ el.mtype }}
          </dt>
          <dt style="margin-left:10px;">{{ el.msg }}</dt>
        </dl>
      </li>
    </ul>
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from "vue-property-decorator";
import eventBus from "../../server/eventBus";
@Component
export default class HelloWorld extends Vue {
  @Prop() private msg!: string;
  private list: any = [];
  public debug(data: object) {
    this.list.push(data);
  }

  private clear() {
    this.list = [];
  }
  mounted() {
    eventBus.$on("debug", this.debug);
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.debugPanel {
  width: 100%;
  height: 150px;
  position: absolute;
  background: #424242;
  color: #fff;
  overflow: scroll;
  bottom: 0px;
  .debugtype {
    margin-left: 10px;
  }
  .itemStyle {
    text-align: left;

    margin-left: 10px;
    margin-right: 10px;
    border-bottom: 1px solid #ccc;
  }
}
</style>
